<template>
  <div class="main">
    <div>
      <div v-if="info">
        <div>
          {{ ipinfo.province }}
          {{ ipinfo.city }}
          {{ ipinfo.district }}
        </div>
        <div>
          天气:
          {{ weather.weather }}
          {{ weather.temperature }}°
        </div>
      </div>
      <div v-else>
        <div>没有获取到信息</div>
      </div>
    </div>
    <div>
      <div v-if="isLogin">
        <ElDropdown @command="handleMenu">
          <div class="logo">
            <ElAvatar :src="Api.getUserLogo(user.tbUser.uid)" shape="circle" />
            <el-icon><ArrowDown /></el-icon>
          </div>

          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>
                {{ user.tbUserInfo.nickname }}
                ( {{ user.tbUser.username }})
              </ElDropdownItem>

              <ElDropdownItem divided command="home">
                <el-icon><ChromeFilled /></el-icon>网站首页
              </ElDropdownItem>

              <ElDropdownItem command="main">
                <el-icon><ChromeFilled /></el-icon>用户首页
              </ElDropdownItem>

              <ElDropdownItem divided command="userlogo">
                修改用户头像
              </ElDropdownItem>

              <ElDropdownItem divided command="userinfo">
                修改用户附加信息
              </ElDropdownItem>

              <ElDropdownItem divided command="userPwd">
                修改用户密码
              </ElDropdownItem>

              <ElDropdownItem divided command="userPhone">
                绑定手机
              </ElDropdownItem>
              <ElDropdownItem divided command="userEmail">
                绑定邮箱
              </ElDropdownItem>
              <ElDropdownItem divided command="user">
                开发者信息
              </ElDropdownItem>


              <ElDropdownItem divided command="logout">安全退出</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
      <div v-else
        ><el-button @click="router.push('/user/login')">登陆</el-button></div
      >
    </div>
  </div>
  <!-- 修改用户附加信息对话框 -->
  <ElDialog v-model="mvisible" title="修改用户附加信息" @closed="update">
    <div>
      <ElForm>
        {{ muserinfo }}
        <ElFormItem label="姓名">
          <ElInput v-model="muserinfo.nickname" />
        </ElFormItem>
        <ElFormItem label="简介">
          <ElInput v-model="muserinfo.info" />
        </ElFormItem>
        <ElFormItem label="qq">
          <ElInput v-model="muserinfo.qq" />
        </ElFormItem>
        <ElFormItem label="微信">
          <ElInput v-model="muserinfo.wechat" />
        </ElFormItem>
        <ElFormItem label="性别">
          <ElRadioGroup v-model="muserinfo.sex">
            <ElRadio value="m">男</ElRadio>
            <ElRadio value="f">女</ElRadio>
            <ElRadio value="n">保密</ElRadio>
          </ElRadioGroup>
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <ElButton @click="mvisible = false">关闭</ElButton>
      <ElButton type="primary" @click="modifyUser">保存</ElButton>
    </template>
  </ElDialog>

  <!--修改密码-->
  <ElDialog v-model="pwoldpwd" title="修改用户密码" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="旧密码">
          <ElInput v-model="pwnewpwd.oldpwd" />
        </ElFormItem>

        <ElFormItem label="新密码">
          <ElInput v-model="pwnewpwd.newpwd" />
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <ElButton @click="pwoldpwd = false">关闭</ElButton>
      <ElButton type="primary" @click="owpwd">保存</ElButton>
    </template>
  </ElDialog>

  <!--绑定手机-->
  <ElDialog v-model="wsph" title="绑定手机" @closed="update">
    <div>
      <ElForm>
        <ElFormItem label="手机号">
          <ElInput v-model="swph.phone" />
        </ElFormItem>

        <ElFormItem label="验证码">
          <ElInput v-model="swph.code" />
          <ElButton type="primary" @click="sendPhoneCode">发送验证码</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <ElButton @click="wsph = false">关闭</ElButton>
      <ElButton type="primary" @click="wphone">保存</ElButton>
    </template>
  </ElDialog>

<!-- 绑定邮箱 -->
<ElDialog v-model="phem" title="绑定邮箱" @closed="update">
  <div>
      <ElForm>
        <ElFormItem label="邮箱">
          <ElInput v-model="qew.email" />
        </ElFormItem>

        <ElFormItem label="验证码">
          <ElInput v-model="qew.code" />
          <ElButton type="primary" @click="sendEmailCode">发送验证码</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
    <template #footer>
      <ElButton @click="phem = false">关闭</ElButton>
      <ElButton type="primary" @click="wemail">保存</ElButton>
    </template>
  </ElDialog>

    <!--开发者信息-->



</template>
<script setup>
//#region 基础导入
import { Tools } from '../script/Tools';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Api from '../script/Api';
import { storeToRefs } from 'pinia';
import ipstore from '../store/ipinfo';
import userstore from '../store/user';
import {
  ElAvatar,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElMessage,
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadioGroup,
  ElRadio,
} from 'element-plus';

const { info, ipinfo, weather } = storeToRefs(ipstore());
const { isLogin, user } = storeToRefs(userstore());
const { update } = userstore();

const router = useRouter();
//#endregion

//#region 菜单处理

const handleMenu = (command) => {
  console.log('菜单:', command);
  if (command == 'home') {
    router.push('/');
  } else if (command == 'main') {
    router.push('/user/main');
  } else if (command == 'logout') {
    logout();
  } else if (command == 'userinfo') {
    showModifyUser();
  } else if (command == 'userlogo') {
    modiryUserLogo();
  } else if (command == 'userPwd') {
    showpwd();
  } else if (command == 'userPhone') {
    showphone();
  }else if (command == 'userEmail') {
    showemail();
  }
};
//#endregion


//#region 开发者信息




//#region 绑定邮箱
const phem = ref(false);
const  qew = ref({});

const showemail = () => {
  qew.value = {
    email: '',
    code: '',
  };
  phem.value = true;
};
const wemail = () => {
  Api.patch('/user/email', qew.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//发送邮箱验证码
const sendEmailCode = () => {
  Api.post('/tools/sendMailCode', { email: qew.value.email }, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};




//#endregion


//#region 绑定手机
const wsph = ref(false);
const swph = ref({});

const showphone = () => {
  swph.value = {
    phone: '',
    code: '',
  };
  wsph.value = true;
};
const wphone = () => {
  Api.patch('/user/phone', swph.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#region 发送手机验证码
const sendPhoneCode = () => {
  Api.post('/tools/sendPhoneCode', { phone: swph.value.phone }, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region 修改密码
const pwoldpwd = ref(false);
const pwnewpwd = ref({});

const showpwd = () => {
  //只要相关字段
  pwnewpwd.value = {
    oldpwd: '',
    newpwd: '',
  };

  pwoldpwd.value = true;
};

const owpwd = () => {
  Api.patch('/user/password', pwnewpwd.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region 修改用户头像

const modiryUserLogo = () => {
  Tools.browseImage((file) => {
    console.log('文件：', file);
    Api.upload('/user/logo', file, {}, (data) => {
      if (data.success) {
        //成功就刷新页面来跟新头像
        location.reload();
      } else {
        ElMessage.error(data.message);
      }
    });
  });
};

//#endregion

//#region 修改用户附加信息
const mvisible = ref(false);
const muserinfo = ref({});

const showModifyUser = () => {
  //只要相关字段
  muserinfo.value = {
    nickname: user.value.tbUserInfo.nickname,
    sex: user.value.tbUserInfo.sex,
    qq: user.value.tbUserInfo.qq,
    wechat: user.value.tbUserInfo.wechat,
    info: user.value.tbUserInfo.info,
  };

  mvisible.value = true;
};

const modifyUser = () => {
  Api.put('/user', muserinfo.value, (data) => {
    if (data.success) {
      ElMessage.success(data.message);
    } else {
      ElMessage.error(data.message);
    }
  });
};

//#endregion

//#region 退出登陆
const logout = () => {
  Api.delete('/auth', {}, () => {
    ElMessage.success('退出成功');
    update();
  });
};

//#endregion
</script>
<style scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
}

.logo {
  display: flex;
  align-items: center;
}
</style>;
